<style lang="less">
  .user{
    .ivu-table th{
      background-color: #005178;
      color: #fff;
    }
  }
</style>
<template>
  <div class="user">
      <Row style="margin-top:10px;margin-bottom:10px;">
          <Col span="17">
            <Button icon="android-add" class="ivu-btn-default" @click="showformModal">增加</Button>
            <Button icon="android-remove" class="ivu-btn-default" @click="delList(idArr1)">删除</Button>
            <Button icon="unlocked" class="ivu-btn-default" @click="isActive('启用',idArr1)">启用</Button>
            <Button icon="locked" class="ivu-btn-default" @click="isActive('禁用',idArr1)">禁用</Button>
            <Button icon="android-refresh" class="ivu-btn-default" @click="refresh">刷新</Button>
          </Col>
          <Col span="7">
            <Input v-model="value" placeholder="请输入要查询的名称" style="width: 200px"></Input>
            <Button type="ghost" @click="search(value)">查询</Button>
          </Col>
      </Row>
      <Table :columns="columns1" :data="data1" @on-selection-change="table1"></Table>
      <Page :total="totalElements" :page-size="size" @on-change="init" style="margin-top:30px;text-align:center;"></Page>

      <!-- 增加用户 -->
      <Modal v-model="formModal" :draggable="true"
           :title="modalName" :mask-closable="false">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="48" inline>
              <Row>
                  <Col span="8" >
                      <FormItem label="用户" prop="account">
                          <Input v-model="formValidate.account" placeholder="请输入用户"></Input>
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="密码" prop="password">
                          <Input v-model="formValidate.password" placeholder="请输入密码" type="password"></Input>
                      </FormItem>
                  </Col>
                  <Col span="8">
                      3
                  </Col>
              </Row>
            <!--<FormItem label="手机号" prop="mobile">-->
                <!--<Input v-model="formValidate.mobile" placeholder="请输入手机号"></Input>-->
            <!--</FormItem>-->
            <!--<FormItem label="是否启用" prop="isActive">-->
                <!--<Select v-model="formValidate.isActive" placeholder="请选择是否启用">-->
                    <!--<Option value="1">启用</Option>-->
                    <!--<Option value="0">禁用</Option>-->
                <!--</Select>-->
            <!--</FormItem>-->
        </Form>
        <div slot="footer">
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
        </div>
      </Modal>
      <!-- 已绑定系统角色 -->
      <Modal v-model="modal1"
        :draggable="true"
        title="已绑定系统角色"
        width="800" :mask-closable="false">
          <Button icon="android-add" class="ivu-btn-default" @click="addRoleShow">增加</Button>
          <Button icon="android-remove" class="ivu-btn-default" @click="Unbundling(idArr2)">解绑</Button>
          <Button icon="android-refresh" class="ivu-btn-default">刷新</Button>
          <Table :columns="columns2" :data="data2" style="margin-top:20px;" @on-selection-change="table2"></Table>
          <Page :total="totalElements2" :page-size="size2" @on-change="roleList" style="margin-top:30px;text-align:center;"></Page>
      </Modal>
      <!-- 角色列表 -->
      <Modal v-model="modal2"
           :draggable="true"
           title="角色列表"
           width="800" :mask-closable="false">
          <Button icon="android-add" class="ivu-btn-default" @click="addRole">绑定</Button>
          <Button icon="android-refresh" class="ivu-btn-default" @click="addRoleShow2(1)">刷新</Button>
          <Table :columns="columns3" :data="data3" style="margin-top:20px;" @on-selection-change="table3"></Table>
          <Page :total="totalElements3" :page-size="size3" @on-change="addRoleShow2" style="margin-top:30px;text-align:center;"></Page>
          <div slot="footer"></div>
      </Modal>
  </div>
</template>

<script>
  export default {
      name: 'user',
      data () {
          return {
              value: '',
              value2: '',
              modalName: '',
              formModal: false,
              modal1: false,
              modal2: false,
              roleID: '',
              formValidate: {
                  account: '',
                  isActive: '',
                  mobile: '',
                  password: ''
              },
              ruleValidate: {
                  account: [
                      { required: true, message: '用户账号不能为空', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '密码不能为空', trigger: 'blur' }
                  ],
                  mobile: [
                      { required: true, message: '手机号不能为空', trigger: 'blur' }
                  ],
                  isActive: [
                      { required: true, message: '请选择是否启用', trigger: 'change' }
                  ]
              },
              columns1: [
                  {
                      type: 'selection',
                      width: 120,
                      align: 'center'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.roleID = params.row.id;
                                          this.modal1 = true;
                                          this.roleList(1);
                                      }
                                  }
                              }, '系统角色权限'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          this.isActive('禁用', ids);
                                      }
                                  }
                              }, '禁用'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          this.delList(ids);
                                      }
                                  }
                              }, '删除')
                          ]);
                      }
                  },
                  {
                      title: '用户名',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '是否启用',
                      key: 'type',
                      align: 'center'
                  }
              ],
              data1: [],
              idArr1: [],
              idArr2: [],
              idArr3: [],
              size: 10,
              totalElements: 1,
              columns2: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {

                                      }
                                  }
                              }, '解绑')
                          ]);
                      }
                  },
                  {
                      title: '角色名称',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '角色表述',
                      key: 'desc',
                      align: 'center'
                  }
              ],
              data2: [],
              columns3: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {

                                      }
                                  }
                              }, '解绑')
                          ]);
                      }
                  },
                  {
                      title: '角色名称',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '角色表述',
                      key: 'desc',
                      align: 'center'
                  }
              ],
              data3: [],
              totalElements2: 10,
              size2: 10,
              totalElements3: 10,
              size3: 10
          };
      },
      mounted () {
          this.init(1);
      },
      methods: {
          search (value) {
              this.value2 = value;
              this.init(1);
          },
          init (val) {
              let page = val - 1;
              depot.get({
                  url: '/user/user/findUserByPage?page=' + page + '&size=10' + '&account=' + this.value2,
                  cb: (data) => {
                      console.log(data, '总数据');
                      if (data.code === 0) {
                          this.data1.splice(0, this.data1.length);
                          data.data.content.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.account;
                              obj.type = item.isActive === true ? '启用' : '禁用';
                              this.data1.push(obj);
                          });
                          this.size = data.data.size;
                          this.totalElements = data.data.totalElements;
                      } else if (data.code === 999) {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          table1 (arr) {
              this.idArr1.splice(0, this.idArr1.length);
              arr.forEach((item, idnex) => {
                  this.idArr1.push(item.id);
              });
          },
          table2 (arr) {
              this.idArr2.splice(0, this.idArr2.length);
              arr.forEach((item, idnex) => {
                  this.idArr2.push(item.id);
              });
              console.log(this.idArr2);
          },
          table3 (arr) {
              this.idArr3.splice(0, this.idArr3.length);
              arr.forEach((item, idnex) => {
                  this.idArr3.push(item.id);
              });
          },
          // 批量开启启用禁用
          isActive (type, arr) {
              console.log(type);
              let url;
              if (type === '启用') {
                  url = 'user/user/updateUserIsActive?isActive=true';
              }
              if (type === '禁用') {
                  url = 'user/user/updateUserIsActive?isActive=false';
              }
              depot.post({
                  url: url,
                  data: arr,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success(type + '成功');
                          setTimeout(() => {
                              location.reload();
                          }, 1000);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 批量删除
          delList (arr) {
              depot.post({
                  url: 'user/user/updateUserIsDelete?isDelete=true',
                  data: arr,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success('删除成功');
                          setTimeout(() => {
                              location.reload();
                          }, 1000);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          roleList (val) {
              let page = val - 1;
              depot.post({
                  url: 'user/role/findRoleListByUser?page=' + page + '&size=6&id=' + this.roleID,
                  cb: (data) => {
                      console.log(data, '已绑定');
                      if (data.code === 0) {
                          this.data2.splice(0, this.data2.length);
                          data.data.content.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.name;
                              obj.desc = item.detail;
                              this.data2.push(obj);
                          });
                          this.totalElements2 = data.data.totalElements;
                          this.size2 = data.data.size;
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 增加用户
          showformModal () {
              this.modalName = '增加用户';
              this.formModal = true;
          },
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      depot.post({
                          url: 'user/user/addSystemUser',
                          data: this.formValidate,
                          cb: (data) => {
                              if (data.code === 0) {
                                  this.init(1);
                                  this.formModal = false;
                              } else {
                                  this.$Message.error(data.message);
                              }
                          }
                      });
                  } else {
                      this.$Message.error('Fail!');
                  }
              });
          },
          addRoleShow () {
              this.modal2 = true;
              this.addRoleShow2(1);
          },
          addRoleShow2 (val) {
              let page = val - 1;
              depot.post({
                  url: 'user/role/findUnBindRoleListByUser?page=' + page + '&size=10&id=' + this.roleID,
                  cb: (data) => {
                      console.log(data, '未绑定');
                      if (data.code === 0) {
                          this.data3.splice(0, this.data3.length);
                          data.data.content.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.name;
                              obj.desc = item.detail;
                              this.data3.push(obj);
                          });
                          this.totalElements3 = data.data.totalElements;
                          this.size3 = data.data.size;
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 绑定
          addRole () {
              depot.post({
                  url: 'user/user/bindUserAndRole?id=' + this.roleID,
                  data: this.idArr3,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success('绑定成功');
                          this.modal2 = false;
                          this.roleList(1);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 解绑
          Unbundling (arr) {
              console.log(arr, '提交的数组');
              depot.post({
                  url: 'user/user/unBindRoleAndUser?userId=' + this.roleID,
                  data: arr,
                  cb: (data) => {
                      console.log(data);
                      if (data.code === 0) {
                          this.$Message.success('解绑成功');
                          this.roleList(1);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 刷新
          refresh () {
              location.reload();
          }
      }
  };
</script>

